import * as echarts from 'echarts';
import React from 'react';
import {Card, Table, List, Avatar , Button, Spin} from 'antd';
import axios from './../../axios/index'
import Utils from './../../utils/utils'
import html2canvas from 'html2canvas';
import jsPDF from 'jspdf';
import './index.less'


const option = {
    tooltip: {
      trigger: 'item'
    },
    series: [
      {
        name: 'Access From',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center'
        },
        emphasis: false,
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
        ]
      }
    ]
  };
export default class Children extends React.Component{
    state = {
        visible: false,
        isLoading: false
    }
    componentDidMount(){
        var chartDom1 = document.getElementById('chart1');
        var chartDom2 = document.getElementById('chart2');
        var chartDom3 = document.getElementById('chart3');
        var chartDom4 = document.getElementById('chart4');
        var chartDom5 = document.getElementById('chart5');
        echarts.init(chartDom1).setOption(option)
        echarts.init(chartDom2).setOption(option)
        echarts.init(chartDom3).setOption(option)
        echarts.init(chartDom4).setOption(option)
        echarts.init(chartDom5).setOption(option)
    }
    
    getPdf = (id) => {
        let promise = new Promise((resolve,reject) => {
            const pdfDom = document.getElementById(id)
            html2canvas(pdfDom, {useCORS: true,}).then(canvas=> {
                let contentWidth = canvas.width;
                let contentHeight = canvas.height;
                let pageHeight = contentWidth / 595.28 * 841.89;  //一页pdf显示html页面生成的canvas高度;
                let leftHeight = contentHeight;  //未生成pdf的html页面高度
                let position = 0;  //pdf页面偏移
                //a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
                let imgWidth = 555.28;
                let imgHeight = 555.28 / contentWidth * contentHeight;
                let pageData = canvas.toDataURL('image/jpeg', 1.0);
                resolve({pageData, imgWidth, imgHeight})
            }) 
          })
          return promise
        
      }
      pdfCreate = async () => {
        this.setState({isLoading: true})
            let pdf = new jsPDF('', 'pt', 'a4');
            const {pageData, imgWidth, imgHeight} = await this.getPdf('echartId')
            pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
            pdf.addPage();
            const table1 = await this.getPdf('table1')
            pdf.addImage(table1.pageData, 'JPEG', 20, 20, table1.imgWidth * 2/3, table1.imgHeight * 2/3);
            pdf.addPage();
            const table2 = await this.getPdf('table2')
            pdf.addImage(table2.pageData, 'JPEG', 20, 20, table2.imgWidth * 2/3, table2.imgHeight * 2/3);
            pdf.addPage();
            const table3 = await this.getPdf('table3')
            pdf.addImage(table3.pageData, 'JPEG', 20, 20, table3.imgWidth * 2/3, table3.imgHeight * 2/3);
            pdf.addPage();
            const table4 = await this.getPdf('table4')
            pdf.addImage(table4.pageData, 'JPEG', 20, 20, table4.imgWidth * 2/3, table4.imgHeight * 2/3);
            pdf.addPage();
            const table5 = await this.getPdf('table5')
            pdf.addImage(table5.pageData, 'JPEG', 20, 20, table5.imgWidth * 2/3, table5.imgHeight * 2/3);
            pdf.save('content.pdf');
            this.setState({isLoading: false})
      }

    render(){
        const columns = [
            {
                title: 'id',   //表头标题
                dataIndex: 'id' //数据源
            },
            {
                title: '用户名',
                dataIndex: 'userName'
            },
            {
               title: '性别',
               dataIndex: 'sex',
               render(sex){
                   return sex === 1 ? '男' : '女'
               }
            },
            {
               title: '状态',
               dataIndex: 'state',
               render(state){
                   let config = {
                       '1': '咸鱼一条',
                       '2': '人民公仆',
                       '3': '医院护士',
                       '4': '科技公司FE',
                       '5': '创业者'
                   }
                   return config[state]
               }
            },
            {
               title: '爱好',
               dataIndex: 'interest',
               render(abc){
                   let config = {
                       '1': '游泳',
                       '2': '打篮球',
                       '3': '踢足球',
                       '4': '跑步',
                       '5': '爬山',
                       '6': '骑行',
                       '7': '桌球',
                       '8': '麦霸'
                   }
                   return config[abc]
               }
            },    
       ]
       const dataSource = [   //数据源
       {
           id: '0',
           userName: 'Elena',
           sex: '1',
           state: '1',
           interest: '1',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '1',
           userName: 'Mary',
           sex: '1',
           state: '2',
           interest: '3',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '2',
           userName: 'Tom',
           sex: '2',
           state: '3',
           interest: '4',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       }
        ]
        const dataSource1 = [   //数据源
       {
           id: '0',
           userName: 'Elena',
           sex: '1',
           state: '1',
           interest: '1',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '1',
           userName: 'Mary',
           sex: '1',
           state: '2',
           interest: '3',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '2',
           userName: 'Tom',
           sex: '2',
           state: '3',
           interest: '4',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '2',
           userName: 'Tom',
           sex: '2',
           state: '3',
           interest: '4',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '2',
           userName: 'Tom',
           sex: '2',
           state: '3',
           interest: '4',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '2',
           userName: 'Tom',
           sex: '2',
           state: '3',
           interest: '4',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '2',
           userName: 'Tom',
           sex: '2',
           state: '3',
           interest: '4',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       },
       {
           id: '2',
           userName: 'Tom',
           sex: '2',
           state: '3',
           interest: '4',
           birthday: '2019-01-01',
           address: '西虹市海淀区桃花公园',
           time: '07:00'
       }
        ]
        return (
            <Spin spinning={this.state.isLoading}>
                <div className="contengBox">
                    {/* startprint */}
                    <div className='contentmain' id='echartId'>
                        <div id="chart1"  style={{ width: 150, height: 150 }}></div>
                        <div id="chart2"  style={{ width: 150, height: 150 }}></div>
                        <div id="chart3"  style={{ width: 150, height: 150 }}></div>
                        <div id="chart4"  style={{ width: 150, height: 150 }}></div>
                        <div id="chart5"  style={{ width: 150, height: 150 }}></div>
                    </div>
                    <div className='box_cla'>
                        <Card title="基础表格" id='table1'>
                            <Table 
                                bordered
                                key="1"
                                columns={columns}
                                dataSource={dataSource}
                                pagination={false}
                            />
                        </Card>
                        <Card title="基础表格" id='table2'>
                            <Table 
                                bordered
                                key="2"
                                columns={columns}
                                dataSource={dataSource}
                                pagination={false}
                            />
                        </Card>
                    </div>
                    <div className='box_cla'>
                        <Card title="基础表格" id='table3'>
                            <Table 
                                bordered
                                key="3"
                                columns={columns}
                                dataSource={dataSource1}
                                pagination={false}
                            />
                        </Card>
                        <Card title="基础表格" id='table4'>
                            <Table 
                                bordered
                                key="4"
                                columns={columns}
                                dataSource={dataSource}
                                pagination={false}
                            />
                        </Card>
                    </div>
                    <div className='box_cla'>
                        <Card title="基础表格" id='table5'>
                            <Table 
                                bordered
                                key="6"
                                columns={columns}
                                dataSource={dataSource1}
                                pagination={false}
                            />
                        </Card>
                        <Button type="primary" onClick={this.pdfCreate}>生成PDF</Button>
                    </div>
                </div>
            </Spin>
        )
    }
}